fix(dashboard): fix WebUI dark mode rendering and multiple UI interaction bugs#7173
Merged
Soulter merged 3 commits intoAstrBotDevs:masterfrom Apr 8, 2026
Merged
fix(dashboard): fix WebUI dark mode rendering and multiple UI interaction bugs#7173Soulter merged 3 commits intoAstrBotDevs:masterfrom
Soulter merged 3 commits intoAstrBotDevs:masterfrom
Conversation
- Tune DarkTheme.ts color palette: soften primary, fix on-surface-variant from black to light grey, adjust surface/background/border colors, add codeBg/preBg/code variables for dark code blocks - Add _HljsDark.scss for highlight.js dark token overrides and markstream-vue CSS variable overrides under .v-theme--PurpleThemeDark - Add global dark mode overrides in _override.scss: soften flat primary buttons, timeline dots, dialog card backgrounds, markdown link color - Fix hardcoded light backgrounds in IPythonToolBlock, ExtensionCard, T2ITemplateEditor, ExtensionPage, KnowledgeBase, LongTermMemory - Remove hardcoded color='black' from icons in ProviderPage, PlatformPage, PersonaPage - Desaturate console log ANSI colors for dark mode readability - Add iframe dark mode inversion filter in VerticalSidebar - Fix language switcher mobile adaptation and click behavior - Fix login page theme toggle tooltip showing wrong label
dosubot
bot
added
the
size:L
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey - I've left some high level feedback:
- In
VerticalSidebar.vuetheisMobileflag is computed once fromwindow.innerWidthand never updated; consider making this reactive (e.g., arefwith a resize listener) so layout/iframe behavior stays correct when the viewport is resized. - Many dark-mode colors (e.g.,
#1e1e2e,#1a1a2e,#2a2a2a,#6cb6ff,#ddd,#aaa) are now hard-coded across multiple components and styles; it would be more maintainable to centralize these as theme variables or SCSS variables to avoid drift and simplify future theme changes. - The
iframeStyle/dragHeaderStyleand related inline style bindings inVerticalSidebar.vueare fairly complex; extracting these into CSS classes (with conditional classes for dark mode) would make the template easier to read and reduce the amount of style logic in the script.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- In `VerticalSidebar.vue` the `isMobile` flag is computed once from `window.innerWidth` and never updated; consider making this reactive (e.g., a `ref` with a resize listener) so layout/iframe behavior stays correct when the viewport is resized.
- Many dark-mode colors (e.g., `#1e1e2e`, `#1a1a2e`, `#2a2a2a`, `#6cb6ff`, `#ddd`, `#aaa`) are now hard-coded across multiple components and styles; it would be more maintainable to centralize these as theme variables or SCSS variables to avoid drift and simplify future theme changes.
- The `iframeStyle`/`dragHeaderStyle` and related inline style bindings in `VerticalSidebar.vue` are fairly complex; extracting these into CSS classes (with conditional classes for dark mode) would make the template easier to read and reduce the amount of style logic in the script.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
dosubot
bot
added
the
area:webui
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
This pull request significantly refines the dark mode implementation across the dashboard by updating the PurpleThemeDark color palette and adding theme-specific styles for various components, including the sidebar, knowledge base, and code highlighting. Key changes include refactoring the draggable iframe in the sidebar to be theme-aware and improving the language switcher's behavior. The review feedback consistently highlights the use of hardcoded hex color values in several components and SCSS files, suggesting they be replaced with Vuetify theme variables or CSS variables from DarkTheme.ts to improve maintainability and UI consistency.
|
|
||
| .code-fallback.dark-theme { | ||
| background-color: transparent; | ||
| background-color: #1e1e2e; |
Contributor
There was a problem hiding this comment.
为了保持主题一致性和可维护性，建议将硬编码的颜色值 #1e1e2e 替换为 Vuetify 主题变量。例如 rgb(var(--v-theme-surface))。
如果这个颜色在多处使用且与现有主题变量都不同，最好在 src/theme/DarkTheme.ts 中将其定义为一个新的颜色变量，然后在所有使用到的地方统一调用。
此建议同样适用于第 181 行。
background-color: rgb(var(--v-theme-surface));
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves the dashboard WebUI’s dark mode usability and fixes multiple UI interaction issues (notably language switching behavior and login-page theme toggle feedback).
Changes:
- Refactors the
PurpleThemeDarkcolor palette and adds global dark-mode overrides to improve contrast/readability. - Fixes language menu interaction in the top header (mobile click behavior) and closes the main menu after switching language.
- Adjusts code highlighting styling by switching to
highlight.jslight theme + scoped dark overrides, and updates several components to better support dark mode.
Reviewed changes
Copilot reviewed 18 out of 18 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| dashboard/src/views/authentication/auth/LoginPage.vue | Makes theme toggle icon/tooltip reflect current theme state. |
| dashboard/src/layouts/full/vertical-header/VerticalHeader.vue | Updates language menu behavior and menu open state handling. |
| dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue | Improves iframe styling/drag behavior and dark-mode appearance. |
| dashboard/src/theme/DarkTheme.ts | Updates the dark theme color system for better contrast. |
| dashboard/src/scss/style.scss | Imports new highlight.js dark override stylesheet. |
| dashboard/src/scss/components/_HljsDark.scss | Adds dark-mode highlight.js token overrides and markstream-vue variable overrides. |
| dashboard/src/scss/_override.scss | Adds global dark-mode overrides (code color, buttons, dialogs/cards, links). |
| dashboard/src/components/shared/ReadmeDialog.vue | Switches highlight.js base theme to github.css (light) for dual-mode support. |
| dashboard/src/components/shared/ConsoleDisplayer.vue | Tweaks ANSI color mapping for better legibility on dark backgrounds. |
| dashboard/src/components/chat/message_list_comps/IPythonToolBlock.vue | Adjusts dark-theme backgrounds for code/result areas. |
| dashboard/src/views/alkaid/LongTermMemory.vue | Adds dark-mode-specific backgrounds for graph container and details. |
| dashboard/src/views/alkaid/KnowledgeBase.vue | Removes hardcoded light background; adds dark-mode styles for KB cards. |
| dashboard/src/views/ExtensionPage.vue | Adds dark-mode background for plugin handler items. |
| dashboard/src/components/shared/T2ITemplateEditor.vue | Adds dark-mode background for preview container. |
| dashboard/src/components/shared/ExtensionCard.vue | Adjusts dark-mode card colors/opacity. |
| dashboard/src/views/ProviderPage.vue | Removes hardcoded black icon color to allow theme-driven coloring. |
| dashboard/src/views/PlatformPage.vue | Removes hardcoded black icon color to allow theme-driven coloring. |
| dashboard/src/views/PersonaPage.vue | Removes hardcoded black icon color to allow theme-driven coloring. |
Soulter
changed the title
Member
|
@piexian 可以参考 cr 给出的相关建议，使用 vuetify 变量替代硬编码颜色值 |
Contributor
Author
👌 |
Contributor
Author
改好了测试没问题你看看这样行不 |
2 tasks
Soulter
approved these changes
Apr 8, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
修复 WebUI 深色模式渲染问题及多个UI交互bug。
深色模式：当前深色模式仅是在浅色界面上覆盖了一层深色背景，导致大量组件文字、背景色、代码高亮等在深色模式下对比度极低、几乎不可见。此 PR 全面修复了深色主题的颜色体系，使深色模式真正可用。
语言切换：右上角语言切换菜单点击后立即关闭，移动端用户无法切换语言。
登录页主题切换：登录页面的主题切换按钮 tooltip 始终显示"切换到浅色主题"，未根据当前主题状态动态切换文案和图标。
Modifications / 改动点
语言切换菜单修复：
v-model控制和@click.stop阻止冒泡，启用open-on-click，解决点击后菜单立即关闭导致移动端无法切换语言的问题登录页主题切换修复：
主题色彩体系重构：
代码高亮深色适配：
.v-theme--PurpleThemeDark下提供正确的深色值全局深色模式覆盖：
.v-theme--PurpleThemeDark全局覆盖规则，包括行内代码文字颜色（--astrbot-code-color）、flat 按钮透明度、timeline 节点、dialog/card 背景色、markdown 链接颜色等组件级修复（移除硬编码浅色值）：
TotalMessage.vue、OnlinePlatform.vue、RunningTime.vue、MemoryUsage.vue：统计卡片添加深色模式专属背景色ConsoleDisplayer.vue：降低 ANSI 终端颜色饱和度，适配深色背景VerticalSidebar.vue：iframe 深色模式通过 CSS invert 滤镜适配color="black"、bg-color="white"等浅色写死值，改用主题变量涉及的其他组件文件：
IPythonToolBlock.vue、ExtensionCard.vue、T2ITemplateEditor.vue、ExtensionPage.vue、KnowledgeBase.vue、LongTermMemory.vue、PlatformStat.vue、ProviderPage.vue、PlatformPage.vue、PersonaPage.vueThis is NOT a breaking change. / 这不是一个破坏性变更。
Screenshots or Test Results / 运行截图或测试结果
PixPin_2026-03-30_11-25-47.mp4
Screenrecorder-2026-03-30-12-00-17-613.mp4
Checklist / 检查清单
😊 If there are new features added in the PR, I have discussed it with the authors through issues/emails, etc.
/ 如果 PR 中有新加入的功能，已经通过 Issue / 邮件等方式和作者讨论过。
👀 My changes have been well-tested, and "Verification Steps" and "Screenshots" have been provided above.
/ 我的更改经过了良好的测试，并已在上方提供了"验证步骤"和"运行截图"。
🤓 I have ensured that no new dependencies are introduced, OR if new dependencies are introduced, they have been added to the appropriate locations in requirements.txt and pyproject.toml.
/ 我确保没有引入新依赖库，或者引入了新依赖库的同时将其添加到 requirements.txt 和 pyproject.toml 文件相应位置。
😮 My changes do not introduce malicious code.
/ 我的更改没有引入恶意代码。
Summary by Sourcery
Improve dashboard dark theme usability and fix several WebUI visual and interaction issues.
Bug Fixes:
Enhancements: